<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <title>KISSY Dialog</title>
    <link rel="stylesheet" href="/kissy/build/css/dpl/base.css"/>
    <link rel="stylesheet" href="assets/cool.css"/>
    <style>
        ul, li {
            list-style: none;
            margin: 0;
            padding: 0;
        }
    </style>
    <script src="/kissy/build/seed.js"></script>
    <script src="/kissy/src/package.js"></script>
</head>
<body>
<div id="header">
    <h1 class="logo"><a alt="KISSY" href="http://docs.kissyui.com/"></a></h1>

    <div class="sub-title">Overlay</div>
    <ul class="navigation">
        <li><a href="https://groups.google.com/group/kissy-ui">讨论组</a></li>
        <li><a href="http://github.com/kissyteam">源码</a></li>
    </ul>

</div>
<div id="content" class="form">
<div class="s-crumbs">
    <span>当前位置：</span>
    <a href="http://docs.kissyui.com/">KISSY</a>
    <a href="http://docs.kissyui.com/docs/html/api/component/overlay/">Overlay</a>
    <span>Dialog</span>
</div>
        <pre class="s-section">

功能：对话框</pre>

<link rel="stylesheet" href="assets/cool.css"/>

<h3 class="s-title">Dialog - 新建 + Mask + aria</h3>

<div class="s-section">
    <div class="s-demo">
        <button id="btn4" class="button">收藏</button>
        <button id="btn41" class="button">destroy</button>
        <script>
            KISSY.use("node,overlay", function (S, Node, O) {
                var dialog = new O.Dialog({
                    width: 400,
                    headerContent: '收藏',
                    bodyContent: '<iframe scrolling="no" height="200" width="398" frameborder="0" name="popupIframe" src="http://favorite.taobao.com/popup/add_collection.htm?id=10166801469&amp;itemtype=1&amp;scjjc=1&amp;_tb_token_=3b38ed73a7775&amp;t=1305543755536"></iframe>',
                    mask: true,
                    align: {
                        points: ['cc', 'cc']
                    }
                });
                Node.one('#btn4').on('click', function () {
                    dialog.show();
                });

                Node.one('#btn41').on('click', function () {
                    dialog.destroy();
                    Node.one('#btn4').detach();
                });
            });
        </script>
    </div>

</div>

<h3 class="s-title">Dialog - 从 Markup 中构建</h3>

<div class="s-section" id="detail">
    <div class="s-demo">
        <style>
            .ks-overlay p {
                margin: 0;
                padding: 0;
            }

            .ks-overlay ul, .ks-overlay li {
                margin: 0;
                padding: 0;
                list-style-type: none;
            }

            #detail .tb-attention {
                position: absolute;
                left: -9999px;
                top: -99999px;
                margin-left: 5px;
                width: 480px;

                background-color: #FFFFFF;
                border: 1px solid #C30009;
            }

            #detail .tb-attention .tb-note-title {
                background: none repeat scroll 0 0 #FFF8F7;
                border-bottom: 1px solid #F3E9E7;
                display: block;
                height: 24px;
                line-height: 24px;
                padding-left: 8px;
                position: relative;
            }

            #detail .tb-key dl {
                padding: 6px;
            }

            #detail .tb-key dt {
                float: left;
                margin-top: 4px;
                text-align: right;
                width: 82px;
            }

            #detail .tb-key dd {
                float: left;
                width: 338px;
            }

            #detail .tb-key li {
                background-color: #FFFFFF;
                float: left;
                line-height: 20px;
                margin: 0 4px 4px 0;
                padding: 1px;
                position: relative;
                vertical-align: middle;
            }

            #detail .tb-key li a {
                background-color: #FFFFFF;
                border: 1px solid #C8C9CD;
                color: #000000;
                display: block;
                min-width: 10px;
                padding: 0 6px;
                text-align: center;
                text-decoration: none;
                white-space: nowrap;
                width: auto !important;
            }

            #detail .tb-key li span {
                padding-left: 1px;
            }

            #detail .tb-key .tb-img li span {
                display: block;
                text-indent: -9999em;
            }

            .ks-clear:after {
                content: '\20';
                display: block;
                height: 0;
                clear: both;
            }

            .ks-clear {
                *zoom: 1;
            }

            #detail .tb-attention .ks-overlay-close .ks-overlay-close-x {
                background: transparent url("http://img01.taobaocdn.com/tps/i1/T1krl0Xk8zXXXXXXXX-194-382.png") -75px -99px no-repeat;
                height: 8px;
            }

            #detail .tb-attention .ks-overlay-close, #detail .tb-attention .ks-overlay-close:hover {
                background: none;
                border: none;
            }
        </style>
        <button id="btn3" class="button">选择</button>

        <div class="tb-key tb-attention" id="choose">
            <div class="ks-dialog-content">
                <a href="javascript:void('close')"
                   class="ks-dialog-close ks-overlay-close" role="button">
                    <span class="ks-dialog-close-x ks-overlay-close-x">close</span>
                </a>

                <div class="ks-dialog-header tb-note-title">请选择您要的商品信息
                </div>

                <div class="ks-dialog-body tb-skin">
                    <dl class="tb-prop ks-clear">
                        <dt>尺　　码：</dt>
                        <dd>
                            <ul data-property="尺码" class="ks-clear J_TSaleProp  ">
                                <li data-value="20503:3271530"><a href="#"><span>M</span></a></li>

                                <li data-value="20503:3271531"><a href="#"><span>L</span></a></li>
                                <li data-value="20503:3267945"><a href="#"><span>XL</span></a></li>
                            </ul>
                        </dd>
                    </dl>
                    <dl class="tb-prop ks-clear">
                        <dt>颜　　色：</dt>
                        <dd>

                            <ul data-property="颜色" class="ks-clear J_TSaleProp tb-img  ">
                                <li data-value="1627207:3232483" title="TX043 白色">
                                    <a href="#"
                                       style="background:url(http://img01.taobaocdn.com/bao/uploaded/i1/290649218/T2DaRjXllMXXXXXXXX_!!290649218.jpg_30x30.jpg) center no-repeat;">
                                        <span>TX043 白色</span>
                                    </a>
                                </li>
                                <li data-value="1627207:3232484" title="TX043 蓝色">
                                    <a href="#"
                                       style="background:url(http://img04.taobaocdn.com/bao/uploaded/i4/290649218/T2OqJjXlpMXXXXXXXX_!!290649218.jpg_30x30.jpg) center no-repeat;">
                                        <span>TX043 蓝色</span>
                                    </a>
                                </li>
                            </ul>
                        </dd>
                    </dl>
                </div>
            </div>
        </div>
        <script>
            KISSY.use("node,overlay,component/plugin/drag," +
                    "dd/plugin/constrain", function (S, Node, O, DragPlugin, ConstrainPlugin) {
                var d = new O.Dialog({
                    srcNode: "#choose",
                    width: 480,
                    mask: true,
                    closable: true,
                    align: {
                        node: "#btn3",
                        points: ['tr', 'cl']
                    },
                    effect: {
                        effect: "slide", //"fade",
                        duration: 0.5
                    }
                });
                d.plug(new DragPlugin({
                    handlers: ['.ks-dialog-header']
                }).plug(new ConstrainPlugin({
                            constrain: window
                        })));
                Node.one('#btn3').on('click', function () {
                    d.show();
                });

                window.srcNodeDialog=d;

            });

        </script>

    </div>

</div>

<h3 class="s-title">Dialog + 限制 + 可缩放</h3>

<div class="s-section">
    <div class="s-demo">
        <style>
            .constrain {
                border: 1px solid #DDDDDD;
                width: 800px;
                height: 400px;
                margin-bottom: 10px;
            }
        </style>
        <div class="constrain" id="c1">
        </div>
        <button id="btn6" class="button">显示</button>
        <button id="btn7" class="button">释放</button>
        <button id="btn8" class="button">限制</button>
        <!--<button id="btnHA" class="button">隐藏页面上所有的对话框</button>-->
        <script>
            KISSY.use("node,overlay," +
                    "component/plugin/drag," +
                    "component/plugin/resize," +
                    "dd/plugin/constrain", function (S, Node, O, DragPlugin, ResizePlugin, ConstrainPlugin) {
                var stat = true,
                        sh = false;

                var dialog = new O.Dialog({
                    width: 400,
                    bodyStyle: {
                        height: '100px'
                    },
                    effect: {
                        effect: 'fade'
                    },
                    mask: false,
                    align: {
                        node: '#c1',
                        points: ['cc', 'cc']
                    },
                    closable: false
                });

                dialog.plug(new DragPlugin({
                            handlers: ['.ks-dialog-header']
                        }).plug(new ConstrainPlugin({
                                    constrain: '#c1'
                                }))).plug(new ResizePlugin({
                            minWidth: 150,
                            minHeight: 70,
                            handlers: ["b", "t", "r", "l", "tr", "tl", "br", "bl"]
                        }));

                dialog.on('beforeVisibleChange', function (e) {
                    if (e.newVal) {
                        if (stat) {
                            this.set('bodyContent', '我的位置只能在容器中');
                        } else {
                            this.set('bodyContent', '我自由啦');
                        }
                        Node.one('#btn6').html('隐藏');
                        sh = 1;
                    }
                });
                dialog.on('hide', function () {
                    Node.one('#btn6').html('显示');
                    sh = 0;
                });

                Node.one('#btn6').on('click', function () {
                    if (!sh) {
                        dialog.show();
                        dialog.set("align", {
                            node: '#c1',
                            points: ['cc', 'cc']
                        });
                    } else {
                        dialog.hide();
                    }
                });


                Node.one('#btn7').on('click', function () {
                    dialog.getPlugin('component/plugin/drag')
                            .getPlugin('dd/plugin/constrain')
                            .set('constrain', false);
                    stat = false;
                    dialog.set('bodyContent', '我自由啦');
                });

                Node.one('#btn8').on('click', function () {
                    dialog.getPlugin('component/plugin/drag')
                            .getPlugin('dd/plugin/constrain')
                            .set('constrain', '#c1');
                    dialog.set("align", {
                        node: '#c1',
                        points: ['cc', 'cc']
                    });
                    stat = true;
                    dialog.set('bodyContent', '我的位置只能在容器中');
                });
            });
        </script>

    </div>

</div>

<h3 class="s-title">Dialog + fixed 居中</h3>

<div class="s-section">
    <div class="s-demo">
        <style>
            .my .ks-dialog-header, .my .ks-dialog-footer {
                display: none;
            }

            .my .ks-dialog-body {
                line-height: 0;
            }
        </style>
        <button id="btn5" class="button">我在可视区域的正中间，点击关闭销毁</button>
        <script>
            KISSY.use("ua,event,node,overlay", function (S, UA, Event, Node, O) {
                var dialog = new O.Dialog({
                    width: 424,
                    elCls: 'my',
                    elStyle: {
                        position: UA.ie == 6 ? "absolute" : "fixed"
                    },
                    <!-- width height 一定要设-->
                    bodyContent: '<img '
                            + 'width="424" '
                            + 'height="282" '
                            + 'src="http://img02.taobaocdn.com/tps/i2/T10J9bXnlgXXXXXXXX-424-282.jpg?noq=y" />',
                    mask: true,
                    align: {
                        points: ['cc', 'cc']
                    },
                    closeAction: "destroy"
                });

                var btn5 = Node.one('#btn5');

                dialog.on("destroy", function () {
                    btn5.detach("click", show);
                    Event.detach(window, "scroll", center);
                });

                btn5.on('click', show);

                function show() {
                    dialog.show();
                }

                function center() {
                    S.log("ie center");
                    if (dialog.get("visible")) {
                        dialog.center();
                    }
                }

                if (UA.ie == 6) {
                    Event.on(window, "scroll", center);
                }
            });
        </script>
    </div>

</div>

<h3 class="s-title">Dialog + 运动到某个位置</h3>

<div class="s-section">
    <div class="s-demo">
        <style>
            #btn18 {
                width: 50px;
                height: 50px;
                text-align: center;
                line-height: 50px;
                cursor: pointer;
                border: 1px solid gray;
                overflow: hidden;
            }
        </style>
        <div id="btn18" tabindex="0"><img width="50" height="50"
                                          src="http://img04.taobaocdn.com/tps/i4/T1QaObXfRoXXXXXXXX-130-130.jpg"/></div>
        <script>
            KISSY.use("dom,node,ua,event,overlay", function (S, Dom, Node, UA, Event, Overlay) {
                var Dialog = Overlay.Dialog, $ = S.all;

                S.ready(function (S) {

                    var dialog = new Overlay({
                        width: 424,
                        elCls: 'my',
                        closable: true,
                        elStyle: {
                            overflow: 'hidden'
                        },
                        align: {
                            points: ['cc', 'cc']
                        },
                        effect: {
                            target: '#btn18',
                            easing: 'easingStrong',
                            duration: .3
                        },
                        <!-- width height 一定要设-->
                        content: '<img '
                                + 'width="424" '
                                + 'height="282" '
                                + 'src = "http://img02.taobaocdn.com/tps/i2/T10J9bXnlgXXXXXXXX-424-282.jpg?noq=y" / > '
                    });

                    var b = Node.one("#btn18");

                    b.on("click", function () {
                        dialog.show();
                    });

                });
            });
        </script>

    </div>

</div>

<h3 class="s-title">代理, 滚动监控 插件使用</h3>

<div class="s-section">
    <h4 class="s-api-title">
        <a href="plugin.html">代理 + 滚动监控</a>
    </h4>
</div>

<h3 class="s-title">API</h3>

<div class="s-section">
    <h4 class="s-api-title"><a href="http://docs.kissyui.com/docs/html/api/component/overlay/dialog.html">详细见这</a></h4>
</div>

</div>
<div id="footer">
    &copy; Copyright 2010~2012, KISSY Team.
</div>
</body>
</html>